<template>
	<div class="app-container">
		<!--11111-->
	</div>
  <!--<div class="app-container">
    <div style="position:absolute;top:0px;left:0px;height:100%;width:100%;" v-loading="loading" >
      &lt;!&ndash;地图&ndash;&gt;
      <IndexMap
          :allRadioIndexData="allRadioIndexData"
          :allListData="allListData"
          :typeCodeDataList="typeCodeDataList"
          :resetClearAllBool="resetClearAllBool"
          @getDetailDataById="getDetailDataById"
      ></IndexMap>
    </div>
    <div id="indexMap-mapDiv" class="ol-popup">
      <div class="select">
        <div class="selectData"><span>选择数据</span><el-icon style="cursor:pointer;" :size="23" @click="hideTabBoxDiv"><Expand /></el-icon></div>
        <div style="position: absolute;top: 0px;left: 160px;">
          <el-select v-model="addDataType" placeholder="请选择数据类别" clearable @change="chooseAddDataType">
            &lt;!&ndash;<el-option key="xzqhsj" label="行政区划" value="行政区划"></el-option>&ndash;&gt;
            <el-option v-for="item in allLevel1SjlbList" :key="item.dictItemCode" :label="item.dictItemName" :value="item.dictItemCode"></el-option>
          </el-select>
          <el-button type="primary" @click="handleAdd" style="position:absolute;">添加数据</el-button>
        </div>
      </div>
      &lt;!&ndash;选择数据收起div&ndash;&gt;
      <div class="box-hide-div" v-if="boxshow==false">
        <span class="box-hide-div-label-span">当前选择：</span>
        <span class="box-hide-div-text-span" v-if="queryParams.dataRangeText!='' || queryParams.dataLayerText!=''">
          {{ queryParams.dataRangeText }}，{{ queryParams.dataLayerText }}
        </span>
      </div>
      &lt;!&ndash;选择数据展开div&ndash;&gt;
      <div class="box" :class="versionCodeDivShow?'box-max':'box-min'" v-if="boxshow==true">
        &lt;!&ndash;选择数据内容div&ndash;&gt;
        <div style="position:absolute;top:0px;left:0px;bottom:40px;width:400px;">
          &lt;!&ndash;tab标签页&ndash;&gt;
          <div class="tab-div">
            <div class="tab-button" :class="activeName=='版本范围'?'tab-active':'tab-no'" @click="showDataRangeTab">
              版本范围
            </div>
            <div class="tab-button" :class="activeName=='数据图层'?'tab-active':'tab-no'" @click="showDataLayerTab">
              数据图层
            </div>
          </div>
          &lt;!&ndash;tab内容div&ndash;&gt;
          <div class="tab-content-all-div">
            &lt;!&ndash;版本范围tab内容&ndash;&gt;
            <div v-if="activeName=='版本范围'" class="tab-content">
              <span class="tab-span" @click="hideTabBoxDiv">收起</span>
              <div style="position:absolute;top:40px;left:20px;right:20px;bottom:0px;">
                <el-radio-group v-model="queryParams.dataRangeCountry" @change="changeRadio" style="margin-bottom: 20px;">
                  <el-radio label="1">国家级数据</el-radio>
                  <el-radio label="2">省级数据</el-radio>
                </el-radio-group>
                <el-form :model="queryParams" ref="queryRef" label-width="50px" :rules="rules">
                  <el-row>
                    <el-col>
                      <el-form-item label="省" prop="dataRangeProvince">
                        <el-select v-model="queryParams.dataRangeProvince" placeholder="请选择" @change="chooseProvince" clearable>
                          <el-option key="全国" label="全国" value="全国" v-if="queryParams.dataRangeCountry == '1'"></el-option>
                          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="市" prop="dataRangeCity">
                        <el-select v-model="queryParams.dataRangeCity" placeholder="请选择" @change="chooseCity" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国'">
                          <el-option key="全部" label="全部" value="全部" v-if="cityData&&cityData.length>0"></el-option>
                          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="区/县" prop="dataRangeArea">
                        <el-select v-model="queryParams.dataRangeArea" placeholder="请选择" @change="chooseArea" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国' || queryParams.dataRangeCity=='全部'">
                          <el-option key="全部" label="全部" value="全部" v-if="areaData&&areaData.length>0"></el-option>
                          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="float: right;margin-right: 50px;">
                  <el-button type="primary" @click="submitSelect">确定</el-button>
                  <el-button @click="resetSelect">重置</el-button>
                </div>
              </div>
            </div>
            &lt;!&ndash;数据图层tab内容&ndash;&gt;
            <div v-if="activeName=='数据图层'" class="tab-content">
              &lt;!&ndash;版本范围当前选择div&ndash;&gt;
              <div style="width:100%;height:80px;background:rgb(230 242 253);overflow: hidden;">
                <span class="tab-span" @click="showDataRangeTab">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataRangeText }}
                </span>
              </div>
              &lt;!&ndash;数据图层当前选择div（展开）&ndash;&gt;
              <div v-if="collapseData.showHideBool==true" class="tab-layercollapse-allShow">
                <div class="tab-layercollapse-allShow-head">
                  <span class="tab-span" @click="hideCollapseDiv">收起</span>
                  <span class="tab-span" @click="resetCollapseDiv" >重置</span>
                </div>
                &lt;!&ndash;数据图层类型选择div&ndash;&gt;
                <div class="tab-layercollapse-div">
                  <el-radio-group v-model="activeRadioLabel" @change="radioChange" style="display: block;">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item v-for="item in collapseLayerData" :title="item.label" :name="item.value" class="tab-layercollapse-header">
                        <div v-for="child in item.children" class="tab-collapse-radioDiv">
                          <el-radio :label="child.radioLabel">{{child.name}}</el-radio>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-radio-group>
                </div>
              </div>
              &lt;!&ndash;数据图层当前选择div（收起）&ndash;&gt;
              <div v-if="collapseData.showHideBool==false" class="tab-layercollapse-allHide">
                <span class="tab-span" @click="collapseData.showHideBool=true">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataLayerText }}
                </span>
              </div>
              &lt;!&ndash;重置div&ndash;&gt;
              <div v-if="collapseData.showHideBool==false">
                <span style="float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;" @click="resetAllCollapseDiv" >重置</span>
              </div>
            </div>
          </div>
        </div>
        &lt;!&ndash;底部收起按钮div&ndash;&gt;
        <div class="foot-div" @click="hideTabBoxDiv">
          <svg-icon style="width:100%;height:100%;" class-name="arrow_drop_up-icon" icon-class="arrow_drop_up" />
        </div>
        &lt;!&ndash;选择数据版本号div&ndash;&gt;
        <div class="tab-select-versionCode-div" v-if="versionCodeDivShow">
          <el-input v-model="queryParams.dataTypeCodeSearchText" @change="querySysDataVersion" size="large" placeholder="请输入版本号" prefix-icon="Search"/>
          <p style="height:20px;color:black;font-weight: bold;">{{collapseData.layerName}}数据</p>
          <div class="tab-table-div">
            <el-table :data="versionCodeTableData" ref="versionCodeTable" @row-click="clickRow"
                      @select="handleSelectionChange" stripe style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="versionCode" label="版本号" width="190" />
              <el-table-column prop="uploadTime" label="上传时间" width="120" />
              <el-table-column align="right" width="50">
                <template #header></template>
                <template #default="scope">
                  &lt;!&ndash;版本信息&ndash;&gt;
                  <el-popover placement="right" :width="210" trigger="hover">
                    <template #reference>
                      <div style="height: 20px;">
                        <svg-icon style="width:100%;height:100%;" class-name="three_point_new-icon" icon-class="three_point_new" />
                      </div>
                    </template>
                    <template #default>
                      <p style="height: 20px;line-height: 20px;margin: 0px;font-weight: bold;">版本信息</p>
                      <el-divider style="margin:10px 0;" />
                      <p style="font-weight: bold;">版本说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.versionDesc }}</p>
                      <p style="font-weight: bold;">数据说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.dataDesc }}</p>
                      <p><span style="font-weight: bold;">上传人：</span>{{scope.row.uploadUser}}</p>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      &lt;!&ndash;根据版本查询图层数据信息表格&ndash;&gt;
      &lt;!&ndash;基础数据信息表格&ndash;&gt;
      <IndexTable v-if="resetClearAllBool==false && allTableDataBool==true"
          :allTableDataBool="allTableDataBool"
          :isSpatialDataBool="isSpatialDataBool"
          :currentLayerName="currentLayerName"
          :currentLayerCode="currentLayerCode"
          :allTableDataList="allTableDataList"
          :allTableTitleList="allTableTitleList"
      ></IndexTable>
      &lt;!&ndash; 添加数据 &ndash;&gt;
      <IndexAddData v-if="addDataType!=null && addDataType!=''"
          :addDataType="addDataType"
          :openAddDataBool="addDataShowDivBool"
          @closeAddData="closeAddData"
      ></IndexAddData>
    </div>
  </div>-->
</template>

<script setup name="Index">
//地图



/*地图传参end*/
</script>

<style scoped lang="scss">
.select{
  position:absolute;
  top:29px;
  left:29px;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .selectData{
    color: darkolivegreen;
    width: 150px;
    height: 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
    /*border:1px solid #707070;*/
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 4px;
  }
}

.box {
  position:absolute;
  top:70px;
  left:29px;
  width: 400px;
  bottom:17px;
  background-color: #fff;
  transition: height 0.3s ease;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

.box-max {
  width: 820px;
}

.box-min {
  width: 400px;
}

.box-hide-div {
  position:absolute;
  top:80px;
  left:29px;
  width:370px;
  height:130px;
  color:#fff;
  background: #000;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
  border:1px solid #707070;
  border-radius: 4px;
  opacity: 0.5;
}

.box-hide-div-label-span {
  position: absolute;top:10px;left:15px;font-weight: bold;font-size: 16px;
}

.box-hide-div-text-span {
  position: absolute;
  top: 40px;
  left: 15px;
  font-size: 14px;
  height: 80px;
  overflow: auto;
  right: 15px;
}

.tab-div {
  position:absolute;top:0px;left:0px;width:110px;height: 100%;border-right: 1px solid #d8dce5;
}
.tab-button {
  position:relative;top:0px;left:0px;width:100%;height:50px;line-height: 50px;text-align: center;
}
.tab-active {
  color:#fff;
  background:var(--el-color-primary);
}
.tab-no {
  color:#666;
  background:#fff;
}

.tab-content-all-div {
  position:absolute;top:0px;left:110px;width:290px;height: 100%;
}

.tab-content {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.tab-span {
  float: right;margin:10px;color: var(--el-color-primary);cursor: pointer;font-size: 14px;
}

.tab-layercollapse-allShow {
  position: absolute;top: 80px;width:100%;bottom:0px;
}

.tab-layercollapse-allShow-head {
  width:100%;height:40px;background:#fff;
}

.tab-layercollapse-allHide {
  width:100%;background:rgb(230 242 253);min-height: 80px;max-height:200px;border-top: 1px solid #d8dce5;overflow:auto;
}

.tab-layercollapse-allHide-label-span{
  position: relative;top:10px;left:20px;font-weight: bold;font-size: 16px;
}
.tab-layercollapse-allHide-text-span {
  position: relative;margin-top: 20px;left:20px;font-size: 14px;width: 250px;display: block;
}

.tab-layercollapse-div{
  position: absolute;top: 40px;width:100%;bottom:0px;overflow:auto;
}

.foot-div {
  position:absolute;left:0px;bottom:0px;width:400px;height:40px;border-top:1px solid #d8dce5;cursor: pointer;
}

.tab-select-versionCode-div {
  position: absolute;top:0px;left:400px;width:420px;bottom:0px;background:#fff;
  border-left:1px solid #d8dce5;padding:10px;
}

.tab-collapse-radioDiv{
  padding-left:20px;
}

.tab-table-div {
  position:absolute;top:102px;left:0px;width:100%;bottom: 0px;overflow: auto;
}

:deep(.el-collapse-item__header) {
  background-color: rgb(230 242 253) !important;
  padding-left: 10px;
  font-size: 14px;
  color: #475767;
}

:deep(.el-collapse-item__content) {
  padding-top: 20px;
  padding-bottom: 20px;
}

// 深度选择器 去掉表头全选按钮
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}

</style>